<template>
    <div class="submit-order">
        <div class="select-addr flex-a flex-b"
            @click="jumpTo('/packageA/pages/addressList/index?type=order&server_id=' + server_id + '&client_ID=' + client_ID + '&server_User_Id=' + server_User_Id + '&mealIndex=' + mealIndex + '&num=' + num + '&orderServiceContent=' + orderServiceContent)">
            <div class="addr-left" v-if="address.ID">
                <div class="title">收货信息</div>
                <div class="name flex-a">
                    <span>{{ address.userName }}</span>
                    <span>{{ address.userPhone }}</span>
                </div>
                <div class="addr">
                    地址：{{ address.userAddress + address.userAddressInit }}
                </div>
            </div>
            <div class="flex-a place" v-else>
                <img src="https://cxj.szzkba.cn/upload/i/2024/07/25/140339.png" alt="">
                <span>请选择服务地址</span>
            </div>
            <Right color="#D0D0D0" size="12" />
            <img src="https://cxj.szzkba.cn/upload/i/2024/07/25/140101.png" class="line" alt="">
        </div>
        <div class="order-time">
            <div class="title">预约信息</div>
            <div class="flex-a flex-b">
                <div class="flex-a t">
                    <!-- <Clock size="14" color="#333" /> -->
                    <span>预约时间</span>
                </div>
                <div class="flex-a p" @click="selectTime">
                    <span>{{ date + time || '请选择预约时间' }}</span>
                    <Right color="#D0D0D0" size="12" />
                </div>
            </div>
        </div>
        <div class="service-box">
            <div class="p-list">
                <div class="title">产品信息</div>
                <div class="p-item flex-a">
                    <div class="p-left">
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/23/141815.png" alt="">
                    </div>
                    <div class="p-right">
                        <div class="t flex-a flex-b">
                            <div class="name">{{ detail.project_Name }}</div>
                            <div class="money">服务费<text>￥{{ Number(meal.mini_Amount) * Number(num) *
                                Number(people.level) }}</text>
                            </div>
                        </div>
                        <div class="i flex-a flex-b">
                            <div>{{ meal.project_Name }}</div>
                            <div>{{ detail.category == '1' ? ' 服务时长：' + num * 60 + '分钟' : '数量：' + num }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="service-box">
            <div class="title">优惠信息</div>
            <div class="coupon flex-a flex-b">
                <div>优惠券</div>
                <div class="flex-a">
                    <span>0&nbsp;张可用</span>
                    <Right color="#D0D0D0" size="12" />
                </div>
            </div>
        </div>
        <div class="remark">
            <span>备注 <text>(选填)</text></span>
            <nut-textarea v-model="remark" placeholder="请填写备注" />
        </div>
        <div class="foot flex-a flex-b">
            <div class="flex-a">
                <span>应付</span>
                <span class="price">￥{{ Number(meal.mini_Amount) * Number(num) * Number(people.level) }}</span>
            </div>
            <nut-button color="#F0A93F" block style="width: 60%;border-radius: 10rpx;" @click="submit">提交订单</nut-button>
        </div>
        <nut-popup v-model:visible="showBottom" position="bottom" closeable round :style="{ height: '80%' }">
            <div class="time-box">
                <div class="title">请选择预约时间</div>
                <div class="bg">
                    <div class="time-list flex-a">
                        <div :class="tab == index ? 'tab active' : 'tab'" v-for="(item, index) in weekList" :key="index"
                            @click="changeTab(index)">
                            <div class="week">{{ item.week }}</div>
                            <div class="day">{{ item.day }}</div>
                        </div>
                    </div>
                    <div class="select-time">
                        <!-- <div class="data-list flex-a">
                            <div class="flex-a s1"><span></span>可选</div>
                            <div class="flex-a s2"><span></span>已预约</div>
                            <div class="flex-a s3"><span></span>已选</div>
                        </div> -->
                        <div class="list">
                            <div :class="item.disabled == true ? 'disabled item' : active == index ? 'active item' : 'item'"
                                v-for="(item, index) in list" :key="index" @click="changeAct(item, index)">
                                {{ item.time }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tip">置灰代表当前时间已被预约</div>
            </div>
            <nut-button color="#F0A93F" block @click="sure"
                style="width: 92%;margin:20rpx auto;border-radius: 10rpx;">确认选择</nut-button>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useReachBottom } from '@tarojs/taro';
import { Right, Clock } from '@nutui/icons-vue-taro';
import dayjs from "dayjs";
import { reactive, toRefs, onMounted } from 'vue';
import { getServiceDetail, getAddressList, createOrder, pay, getUserDetailsList, getFindUserDetails, getUserTime } from '../../../../api/index'
export default {
    components: {
        Right,
        Clock
    },
    setup() {
        const data = reactive({
            remark: '',
            detail: {},
            addressList: [],
            addressId: '',
            address: {
                userAddress: ''
            },
            user: {},
            server_id: '',
            server_User_Id: '',
            showBottom: false,
            weekList: [
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                }
            ],
            tab: 0,
            list: [],
            ind: 0,
            active: -1,
            time: '',
            date: '',
            week: '',
            client_ID: '',
            mealIndex: -1,
            meal: {},
            people: {},
            num: 0,
            orderServiceContent: '' as any
        });

        onMounted(() => {
            const router = useRouter();
            if (router.params.orderServiceContent) {
                data.orderServiceContent = router.params.orderServiceContent
            }
            if (router.params.server_id) {
                data.server_id = router.params.server_id
                getDetail(router.params.server_id)
            }
            if (router.params.server_User_Id) {
                data.server_User_Id = router.params.server_User_Id
                getUserAllList() //updated by Aaron
            }
            if (router.params.client_ID) {
                data.client_ID = router.params.client_ID
            }
            if (router.params.mealIndex) {
                data.mealIndex = Number(router.params.mealIndex)
            }
            if (router.params.num) {
                data.num = Number(router.params.num)
            }
            if (router.params.addressId) {
                data.addressId = router.params.addressId
                getAddressList().then(response => {
                    if (response.code == 0) {
                        data.addressList = response.data.list
                        response.data.list.forEach(item => {
                            if (item.ID == router.params.addressId) {
                                data.address = item
                            }
                        })
                    }
                })
            }
            let time = new Date()
            let week = time.getDay()
            let month = time.getMonth() + 1
            let day = time.getDate()
            console.log(week, month, day)
            let weeks = data.weekList
            weeks.forEach((item, index) => {
                item.week = getWeek(week + index) || ''
                item.day = getMonth(index)
            })
            data.weekList = weeks
            getList()
            // getNewList()
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    console.log(res)
                    data.user = res.data
                }
            })
        })
        const getDetail = (id) => {
            getServiceDetail({ ID: id }).then(res => {
                if (res.code == 0) {
                    data.detail = res.data.repageSetting
                    data.meal = res.data.repageSetting.ProjectSecs[data.mealIndex]
                }
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        useReachBottom(() => {

        })
        const sure = () => {
            data.showBottom = false
        }
        const getUserAllList = () => {
            getFindUserDetails({ User_ID: data.server_User_Id }).then(res => {
                if (res.code == 0) {
                    data.people = res.data.reuserDetails
                }
            })
        }
        const submit = () => {
            if (data.date && data.address.userAddress) {
                let params = {
                    server_id: data.server_id,
                    server_User_Id: data.server_User_Id,
                    user_ID: data.user.uuid,
                    service_Name: data.detail.project_Name,
                    service_Time: data.date + data.time,
                    service_Addr: data.address.userAddress + data.address.userAddressInit,
                    service_Lng: data.address.userLng,
                    service_Lat: data.address.userLat,
                    service_Amount: Number(data.meal.mini_Amount) * Number(data.num) * Number(data.people.level),
                    client_ID: data.client_ID,
                    taxi_Amount: 0,
                    Count: data.num,
                    orderServiceContent: data.orderServiceContent
                }
                // let orderServiceContent = JSON.parse(data.orderServiceContent)
                // params.orderServiceContent = orderServiceContent 
                if (data.user.uuid) {
                    createOrder(params).then(res => {
                        if (res.code == 0) {
                            pay({
                                order_No: res.data,
                                openId: data.user.openId,
                                title: '支付调用',
                                remark: '',
                            }).then(res => {
                                if (res.code == 0) {
                                    Taro.requestPayment({
                                        timeStamp: res.data.timeStamp,
                                        nonceStr: res.data.nonceStr,
                                        package: res.data.package,
                                        signType: res.data.signType,
                                        paySign: res.data.paySign,
                                        success: function (res) {
                                            Taro.redirectTo({
                                                url: '/packageA/pages/findPage/index'
                                            })
                                        },
                                    })
                                }
                            })
                        }
                    })
                } else {
                    Taro.showModal({
                        title: '请登录',
                        content: '登录后体验更好的服务',
                        showCancel: false,
                        success: function (res) {
                            Taro.reLaunch({
                                url: '/packageA/pages/mypage/index'
                            })
                        }
                    })
                }
            } else {
                Taro.showToast({
                    title: '请选择时间/地址',
                    icon: 'error',
                    duration: 2000
                })
            }

        }
        const getMonth = (i) => {
            let time = new Date().getTime()
            let endTime = time + i * 24 * 3600 * 1000
            let endTimes = dayjs(endTime).format('MM月DD日')
            return endTimes
        }
        const getHM = (now, i) => {
            let time = new Date(now).getTime()
            let endTime = time + 1800 * 1000 * i
            let endTimes = dayjs(endTime).format('HH:mm')
            return endTimes
        }
        const getWeek = (n) => {
            if (n > 7) {
                n = n - 7
            }
            if (n == 1) {
                return '星期一'
            } else if (n == 2) {
                return '星期二'
            } else if (n == 3) {
                return '星期三'
            } else if (n == 4) {
                return '星期四'
            } else if (n == 5) {
                return '星期五'
            } else if (n == 6) {
                return '星期六'
            } else if (n == 7) {
                return '星期天'
            }
        }
        const changeTab = (index) => {
            data.tab = index
            data.date = data.weekList[index].day
            data.week = data.weekList[index].week
            getTimeList(data.weekList[index].day)
            if (index == 0) {
                getNewList()
            } else {
                getList()
            }
            // transData()
        }
        const getList = () => {
            let arr = [] as any
            for (var i = 0; i < 48; i++) {
                arr.push({
                    time: '',
                    disabled: false,
                })
                arr[i].time = getHM('2024-01-01 00:00:00', i)
                arr[i].disabled = false
            }
            data.list = arr
            console.log("7777777777777")
            console.log(data.list)
        }
        const getNewList = () => {
            let currTime = getHM(new Date().getTime(), 2)
            console.log(currTime)
            let num = Number(currTime.split(':')[1])
            let n = '', current = ''
            if (num <= 30) {
                n = '30'
                current = Number(currTime.split(':')[0]) + ':' + n
            } else {
                n = '00'
                current = (Number(currTime.split(':')[0]) + 1) + ':' + n
            }
            data.ind = data.list.findIndex((item) => { return item.time == current })
            data.list = data.list.slice(data.ind, data.list.length)
        }
        const changeAct = (item, index) => {
            data.active = index
            data.time = item.time
            if (data.tab == 0) {
                data.date = data.weekList[0].day
                data.week = data.weekList[0].week
            }
            // transData()
        }
        const selectTime = () => {
            getTimeList(data.weekList[0].day)
            data.showBottom = true
        }
        const getTimeList = (time) => {
            getUserTime({ userId: data.server_User_Id, time: time || data.date }).then(res => {
                if (res.code == 0) {
                    let list = res.data.timeModels
                    let arr = []
                    list.forEach((item, index) => {
                        let currDate = item.service_Time.split('日')[0] + '日'
                        let currTime = item.service_Time.split('日')[1]
                        let currLimit = Number(item.count) * 2 + 1
                        arr.push({
                            m: currDate,
                            d: currTime,
                            n: currLimit
                        })
                    })
                    console.log("4444444444444444444444")
                    console.log(arr)
                    let weeks = data.weekList, tab = [], time = data.list, inds = []
                    arr.forEach((ele, ind) => {
                        tab.push({
                            x: 0,
                            y: 0,
                            z: 0
                        })
                        weeks.forEach((item, index) => {
                            if (ele.m == item.day) {
                                tab[ind].x = index
                            }
                            time.forEach((element, e) => {
                                if (ele.d == element.time) {
                                    tab[ind].y = e
                                    tab[ind].z = ele.n
                                }
                            })
                        })
                    })
                    console.log("555555555555555555555")
                    console.log(tab)
                    tab.forEach((item, index) => {
                        time.forEach((ele, ind) => {
                            console.log(item.y, item.y + item.z)
                            if (ind >= item.y && ind <= (item.y + item.z)) {
                                ele.disabled = true
                            }
                        })
                    })
                    data.list = time
                    getNewList()
                    console.log("666666666666666666666")
                    console.log(data.list)
                }
            })
        }
        return {
            ...toRefs(data), jumpTo, getDetail, submit, changeAct, getNewList, getList, changeTab, getWeek, getHM, getMonth, selectTime, sure, getUserAllList, getTimeList
        }
    }
};
</script>
<style lang="scss">
.submit-order {
    padding-top: 20rpx;

    .select-addr {
        width: 90%;
        margin: 0 auto 20rpx;
        background: #fff;
        border-radius: 10rpx;
        padding: 20rpx 20rpx 40rpx;
        position: relative;

        .addr-left {
            width: 98%;
        }

        .title {
            color: #0C0F31;
            font-size: 26rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

        .name {
            margin-bottom: 10rpx;
            color: #1F2141;
            font-size: 24rpx;

            span:first-child {
                margin-right: 10rpx;
            }
        }

        .addr {
            color: #1F2141;
            font-size: 24rpx;
        }

        div.place {
            width: 95%;

            img {
                width: 40rpx;
                height: 40rpx;
            }

            span {
                font-size: 28rpx;
                margin-left: 20rpx;
                white-space: nowrap;
            }
        }

        .line {
            width: 100%;
            height: 20rpx;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }

    .order-time {
        width: 90%;
        margin: 0 auto 20rpx;
        background: #fff;
        border-radius: 10rpx;
        padding: 30rpx 20rpx;

        .title {
            color: #0C0F31;
            font-size: 26rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

        .t {
            span {
                font-size: 24rpx;
                color: #3A3C58;
            }
        }

        .p {
            span {
                font-size: 26rpx;
                color: #999999;
                margin-right: 20rpx;
            }
        }
    }

    .service-box {
        width: 90%;
        margin: 0 auto 20rpx;
        background: #fff;
        border-radius: 10rpx;
        padding: 20rpx;

        .title {
            font-size: 26rpx;
            color: #101335;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .p-list {
            border-bottom: 1rpx solid #FCFCFC;

            .p-item {
                margin-bottom: 20rpx;

                .p-left {
                    margin-right: 20rpx;
                    width: 80rpx;

                    img {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 10rpx;
                    }
                }

                .p-right {
                    width: calc(100% - 100rpx);

                    .t {
                        font-size: 26rpx;

                        .name {
                            font-weight: bold;
                            color: #242745;
                        }

                        .money {
                            color: #A0A1AC;

                            text {
                                font-weight: bold;
                                color: #242745;
                                margin-left: 10rpx;
                                font-size: 30rpx;
                            }
                        }
                    }

                    .i {
                        margin: 20rpx 0;
                        font-size: 26rpx;
                        color: #A0A1AC;
                    }

                    .s {
                        font-size: 24rpx;
                        margin-bottom: 10rpx;

                        span:first-child {
                            color: #25DCA2;
                            padding: 4rpx 10rpx;
                            border-radius: 5rpx;
                            background: #F2FEF8;
                            margin-right: 10rpx;
                        }

                        span:last-child {
                            color: #FB8D5B;
                            padding: 4rpx 10rpx;
                            border-radius: 5rpx;
                            background: #FFF8F5;
                        }
                    }

                    .f {
                        .price {
                            color: #F22F5C;
                            font-size: 32rpx;
                        }
                    }
                }
            }
        }

        .coupon {
            color: #181B3B;
            font-size: 26rpx;

            div:last-child {
                span {
                    margin-right: 10rpx;
                    padding: 3rpx 8rpx;
                    border-radius: 5rpx;
                    color: #2F2020;
                }
            }
        }
    }

    .remark {
        width: 90%;
        margin: 0 auto 20rpx;
        background: #fff;
        border-radius: 10rpx;
        padding: 20rpx;
        font-size: 26rpx;

        span {
            white-space: nowrap;
            color: #131537;
            font-weight: bold;

            text {
                color: #AAAAAA;
                margin-left: 10rpx;
                font-weight: normal;
            }
        }

        .nut-textarea {
            padding: 20rpx 0 0;
        }

        .textarea-placeholder {
            color: #D0D0D0;
            font-size: 26rpx;
        }
    }

    .foot {
        margin-left: 2%;
        width: 88%;
        background: #fff;
        padding: 20rpx 30rpx;

        div {
            font-size: 26rpx;
            color: #B7B7C0;

            span.price {
                color: #FE1D1D;
                font-size: 32rpx;
                margin-left: 20rpx;
                font-weight: bold;
            }
        }
    }
}

.nut-popup__close-icon--top-right {
    top: 72rpx !important;
}

.time-box {
    width: 92%;
    margin: 40rpx auto 0;
    border: 1rpx solid #DDDDDD;
    border-radius: 10rpx;

    .title {
        color: #0E1133;
        font-size: 36rpx;
        font-weight: bold;
        padding: 30rpx 0 20rpx 20rpx;
    }

    .bg {
        background: #F9F9F9;
        border-radius: 10rpx;
        width: 96%;
        margin: 0 auto 20rpx;
    }

    .time-list {
        display: flex;

        .tab {
            font-size: 24rpx;
            text-align: center;
            flex: 1;
            padding: 10rpx 0;
            background: #fff;

            .week {
                color: #393B56;
                font-weight: bold;
            }

            .day {
                color: #3B3D59;
            }
        }

        .tab.active {
            background: #F9F9F9;
        }
    }

    .select-time {
        padding: 20rpx;

        .data-list {
            margin: 20rpx 0;
            font-size: 24rpx;

            span {
                display: inline-block;
                width: 25rpx;
                height: 25rpx;
                border-radius: 7rpx;
                margin-right: 5rpx;
            }

            .flex-a {
                margin-right: 50rpx;
            }

            .s1 span {
                border: 1rpx solid #333;
            }

            .s2 span {
                background: #DDDDDD;
            }

            .s3 span {
                background: #2AEA95;
            }
        }

        .list {
            .item {
                border: 2rpx solid #fff;
                color: #2B2D4A;
                font-size: 26rpx;
                border-radius: 10rpx;
                width: 18%;
                height: 50rpx;
                text-align: center;
                line-height: 50rpx;
                display: inline-block;
                box-sizing: border-box;
                margin: 0 2.5% 20rpx 0;
                background: #fff;
            }

            .item:nth-child(5n+5) {
                margin: 0 0 20rpx 0;
            }

            .item.active {
                background: #F8F2E6;
                border-color: #F0B051;
            }

            .item.disabled {
                background: #EAEAEA;
                border-color: #DDDDDD;
                color: #A9A9A9;
            }
        }
    }

    .tip {
        color: #97989C;
        font-size: 22rpx;
        margin: 20rpx;
    }
}
</style>